{% extends "base_lang.html" %}

{% block title %}Contact Us - Sprunki Phase 3{% endblock %}

{% block description %}Get in touch with the Sprunki Phase 3 team. We're here to help with any questions or feedback about our interactive music creation game.{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="pt-20 pb-12 md:pt-32 md:pb-20 bg-gradient-to-r from-primary to-secondary">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">{{ _('Contact Us') }}</h1>
            <p class="text-xl text-white mb-8">{{ _("We'd Love to Hear From You") }}</p>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section class="py-16 bg-white dark:bg-gray-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-2 gap-12">
            <!-- Contact Form -->
            <div class="bg-gray-50 dark:bg-gray-700 p-8 rounded-lg shadow-lg">
                <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100">{{ _('Send Us a Message') }}</h2>
                <form action="#" method="POST" class="space-y-6">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Name') }}</label>
                        <input type="text" name="name" id="name" 
                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary dark:bg-gray-600 dark:border-gray-500 dark:text-white">
                    </div>
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Email') }}</label>
                        <input type="email" name="email" id="email" 
                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary dark:bg-gray-600 dark:border-gray-500 dark:text-white">
                    </div>
                    <div>
                        <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Subject') }}</label>
                        <input type="text" name="subject" id="subject" 
                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary dark:bg-gray-600 dark:border-gray-500 dark:text-white">
                    </div>
                    <div>
                        <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Message') }}</label>
                        <textarea name="message" id="message" rows="4" 
                                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary dark:bg-gray-600 dark:border-gray-500 dark:text-white"></textarea>
                    </div>
                    <div>
                        <button type="submit" 
                                class="w-full bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-md transition duration-300">
                            {{ _('Send Message') }}
                        </button>
                    </div>
                </form>
            </div>

            <!-- Contact Information -->
            <div class="space-y-8">
                <div>
                    <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100">{{ _('Get in Touch') }}</h2>
                    <p class="text-gray-600 dark:text-gray-300 mb-6">
                        {{ _('Have questions about Sprunki Phase 3? We\'re here to help! Send us a message and we\'ll get back to you as soon as possible.') }}
                    </p>
                </div>
                
                <div class="space-y-4">
                    <div class="flex items-start space-x-4">
                        <div class="text-primary mt-1">
                            <i class="fas fa-envelope text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-900 dark:text-gray-100">{{ _('Email') }}</h3>
                            <p class="text-gray-600 dark:text-gray-300">support@sprunki-phase3.com</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start space-x-4">
                        <div class="text-primary mt-1">
                            <i class="fas fa-clock text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-900 dark:text-gray-100">{{ _('Support Hours') }}</h3>
                            <p class="text-gray-600 dark:text-gray-300">{{ _('Monday - Friday: 9:00 AM - 6:00 PM EST') }}</p>
                        </div>
                    </div>

                    <div class="flex items-start space-x-4">
                        <div class="text-primary mt-1">
                            <i class="fas fa-comments text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-900 dark:text-gray-100">{{ _('Social Media') }}</h3>
                            <div class="flex space-x-4 mt-2">
                                <a href="#" class="text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary">
                                    <i class="fab fa-twitter"></i>
                                </a>
                                <a href="#" class="text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary">
                                    <i class="fab fa-discord"></i>
                                </a>
                                <a href="#" class="text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary">
                                    <i class="fab fa-github"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
